<!DOCTYPE html>
<html
  lang="en"
  data-bs-theme="light"
  data-menu-color="brand"
  data-topbar-color="light"
>
  <head>
    <meta charset="utf-8" />
    <title>Modals | Dashtrap - Responsive Bootstrap 5 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      content="A fully featured admin theme which can be used to build CRM, CMS, etc."
      name="description"
    />
    <meta content="Myra Studio" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="../src/assets/images/favicon.ico" />

    <!-- App css -->
    <link
      href="../src/assets/css/style.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../src/assets/css/icons.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="../src/assets/js/config.js"></script>
  </head>

  <body>
    <!-- Begin page -->
    <div class="layout-wrapper">
      <!-- ========== Left Sidebar ========== -->
      <div class="main-menu">
        <!-- Brand Logo -->
        <div class="logo-box">
          <!-- Brand Logo Light -->
          <a href="index.html" class="logo-light">
            <img
              src="../src/assets/images/logo-light.png"
              alt="logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>

          <!-- Brand Logo Dark -->
          <a href="index.html" class="logo-dark">
            <img
              src="../src/assets/images/logo-dark.png"
              alt="dark logo"
              class="logo-lg"
              height="28"
            />
            <img
              src="../src/assets/images/logo-sm.png"
              alt="small logo"
              class="logo-sm"
              height="28"
            />
          </a>
        </div>

        <!--- Menu -->
        <div data-simplebar>
          <ul class="app-menu">
            <li class="menu-title">Menu</li>

            <li class="menu-item">
              <a href="index.html" class="menu-link waves-effect waves-light">
                <span class="menu-icon"><i class="bx bx-home-smile"></i></span>
                <span class="menu-text"> Dashboards </span>
                <span class="badge bg-primary rounded ms-auto">01</span>
              </a>
            </li>

            <li class="menu-title">Custom</li>

            <li class="menu-item">
              <a
                href="apps-calendar.html"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-calendar"></i></span>
                <span class="menu-text"> Calendar </span>
              </a>
            </li>

            <li class="menu-item">
              <a
                href="#menuExpages"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-file"></i></span>
                <span class="menu-text"> Extra Pages </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuExpages">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="pages-starter.html" class="menu-link">
                      <span class="menu-text">Starter</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-invoice.html" class="menu-link">
                      <span class="menu-text">Invoice</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-login.html" class="menu-link">
                      <span class="menu-text">Log In</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-register.html" class="menu-link">
                      <span class="menu-text">Register</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-recoverpw.html" class="menu-link">
                      <span class="menu-text">Recover Password</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-lock-screen.html" class="menu-link">
                      <span class="menu-text">Lock Screen</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-404.html" class="menu-link">
                      <span class="menu-text">Error 404</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="pages-500.html" class="menu-link">
                      <span class="menu-text">Error 500</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuLayouts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-layout"></i></span>
                <span class="menu-text"> Layouts </span>
                <span class="badge bg-blue ms-auto">New</span>
              </a>
              <div class="collapse" id="menuLayouts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="layout-horizontal.html" class="menu-link">
                      <span class="menu-text">Horizontal</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-light.html" class="menu-link">
                      <span class="menu-text">Sidenav Light</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-sidenav-dark.html" class="menu-link">
                      <span class="menu-text">Sidenav Dark</span>
                    </a>
                  </li>

                  <li class="menu-item">
                    <a href="layout-topbar-dark.html" class="menu-link">
                      <span class="menu-text">Topbar Dark</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-title">Components</li>

            <li class="menu-item">
              <a
                href="#menuComponentsui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-cookie"></i></span>
                <span class="menu-text"> UI Elements </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuComponentsui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="ui-alerts.html" class="menu-link">
                      <span class="menu-text">Alerts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-buttons.html" class="menu-link">
                      <span class="menu-text">Buttons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-cards.html" class="menu-link">
                      <span class="menu-text">Cards</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-carousel.html" class="menu-link">
                      <span class="menu-text">Carousel</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-dropdowns.html" class="menu-link">
                      <span class="menu-text">Dropdowns</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-video.html" class="menu-link">
                      <span class="menu-text">Embed Video</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-general.html" class="menu-link">
                      <span class="menu-text">General UI</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-grid.html" class="menu-link">
                      <span class="menu-text">Grid</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-images.html" class="menu-link">
                      <span class="menu-text">Images</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-list-group.html" class="menu-link">
                      <span class="menu-text">List Group</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-modals.html" class="menu-link">
                      <span class="menu-text">Modals</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-offcanvas.html" class="menu-link">
                      <span class="menu-text">Offcanvas</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-placeholders.html" class="menu-link">
                      <span class="menu-text">Placeholders</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-progress.html" class="menu-link">
                      <span class="menu-text">Progress</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-spinners.html" class="menu-link">
                      <span class="menu-text">Spinners</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tabs-accordions.html" class="menu-link">
                      <span class="menu-text">Tabs & Accordions</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-tooltips-popovers.html" class="menu-link">
                      <span class="menu-text">Tooltips & Popovers</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="ui-typography.html" class="menu-link">
                      <span class="menu-text">Typography</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuExtendedui"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-briefcase-alt-2"></i
                ></span>
                <span class="menu-text"> Components </span>
                <span class="badge bg-info ms-auto">Hot</span>
              </a>
              <div class="collapse" id="menuExtendedui">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="components-range-slider.html" class="menu-link">
                      <span class="menu-text">Range Slider</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-sweet-alert.html" class="menu-link">
                      <span class="menu-text">Sweet Alert</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="components-loading-buttons.html" class="menu-link">
                      <span class="menu-text">Loading Buttons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuIcons"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-aperture"></i></span>
                <span class="menu-text"> Icons </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuIcons">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="icons-feather.html" class="menu-link">
                      <span class="menu-text">Feather Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-mdi.html" class="menu-link">
                      <span class="menu-text">Material Design Icons</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="icons-dripicons.html" class="menu-link">
                      <span class="menu-text">Dripicons</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuForms"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bxs-eraser"></i></span>
                <span class="menu-text"> Forms </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuForms">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="forms-elements.html" class="menu-link">
                      <span class="menu-text">General Elements</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-advanced.html" class="menu-link">
                      <span class="menu-text">Advanced</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-validation.html" class="menu-link">
                      <span class="menu-text">Validation</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-quilljs.html" class="menu-link">
                      <span class="menu-text">Editor</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="forms-file-uploads.html" class="menu-link">
                      <span class="menu-text">File Uploads</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuTables"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-table"></i></span>
                <span class="menu-text"> Tables </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuTables">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="tables-basic.html" class="menu-link">
                      <span class="menu-text">Basic Tables</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="tables-datatables.html" class="menu-link">
                      <span class="menu-text">Data Tables</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuCharts"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"
                  ><i class="bx bx-doughnut-chart"></i
                ></span>
                <span class="menu-text"> Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuCharts">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="charts-apex.html" class="menu-link">
                      <span class="menu-text">Apex Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-morris.html" class="menu-link">
                      <span class="menu-text">Morris Charts</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="charts-chartjs.html" class="menu-link">
                      <span class="menu-text">Chartjs Charts</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMaps"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-map-alt"></i></span>
                <span class="menu-text"> Maps </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMaps">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a href="maps-google.html" class="menu-link">
                      <span class="menu-text">Google Maps</span>
                    </a>
                  </li>
                  <li class="menu-item">
                    <a href="maps-vector.html" class="menu-link">
                      <span class="menu-text">Vector Maps</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>

            <li class="menu-item">
              <a
                href="#menuMultilevel"
                data-bs-toggle="collapse"
                class="menu-link waves-effect waves-light"
              >
                <span class="menu-icon"><i class="bx bx-share-alt"></i></span>
                <span class="menu-text"> Multi Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="menuMultilevel">
                <ul class="sub-menu">
                  <li class="menu-item">
                    <a
                      href="#menuMultilevel2"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text"> Second Level </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel2">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 2</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </li>

                  <li class="menu-item">
                    <a
                      href="#menuMultilevel3"
                      data-bs-toggle="collapse"
                      class="menu-link waves-effect waves-light"
                    >
                      <span class="menu-text">Third Level</span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="menuMultilevel3">
                      <ul class="sub-menu">
                        <li class="menu-item">
                          <a href="javascript: void(0);" class="menu-link">
                            <span class="menu-text">Item 1</span>
                          </a>
                        </li>
                        <li class="menu-item">
                          <a
                            href="#menuMultilevel4"
                            data-bs-toggle="collapse"
                            class="menu-link waves-effect waves-light"
                          >
                            <span class="menu-text">Item 2</span>
                            <span class="menu-arrow"></span>
                          </a>
                          <div class="collapse" id="menuMultilevel4">
                            <ul class="sub-menu">
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 1</span>
                                </a>
                              </li>
                              <li class="menu-item">
                                <a
                                  href="javascript: void(0);"
                                  class="menu-link"
                                >
                                  <span class="menu-text">Item 2</span>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Start Page Content here -->
      <div class="page-content">
        <!-- ========== Topbar Start ========== -->
        <div class="navbar-custom">
          <div class="topbar">
            <div class="topbar-menu d-flex align-items-center gap-lg-2 gap-1">
              <!-- Brand Logo -->
              <div class="logo-box">
                <!-- Brand Logo Light -->
                <a href="index.html" class="logo-light">
                  <img
                    src="../src/assets/images/logo-light.png"
                    alt="logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>

                <!-- Brand Logo Dark -->
                <a href="index.html" class="logo-dark">
                  <img
                    src="../src/assets/images/logo-dark.png"
                    alt="dark logo"
                    class="logo-lg"
                    height="22"
                  />
                  <img
                    src="../src/assets/images/logo-sm.png"
                    alt="small logo"
                    class="logo-sm"
                    height="22"
                  />
                </a>
              </div>

              <!-- Sidebar Menu Toggle Button -->
              <button class="button-toggle-menu">
                <i class="mdi mdi-menu"></i>
              </button>
            </div>

            <ul class="topbar-menu d-flex align-items-center gap-4">
              <li class="d-none d-md-inline-block">
                <a class="nav-link" href="" data-bs-toggle="fullscreen">
                  <i class="mdi mdi-fullscreen font-size-24"></i>
                </a>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-magnify font-size-24"></i>
                </a>
                <div
                  class="dropdown-menu dropdown-menu-animated dropdown-menu-end dropdown-lg p-0"
                >
                  <form class="p-3">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Search ..."
                      aria-label="Recipient's username"
                    />
                  </form>
                </div>
              </li>

              <li class="dropdown d-none d-md-inline-block">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/flags/us.jpg"
                    alt="user-image"
                    class="me-0 me-sm-1"
                    height="18"
                  />
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated"
                >
                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/germany.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">German</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/italy.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Italian</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/spain.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Spanish</span>
                  </a>

                  <!-- item-->
                  <a href="javascript:void(0);" class="dropdown-item">
                    <img
                      src="../src/assets/images/flags/russia.jpg"
                      alt="user-image"
                      class="me-1"
                      height="12"
                    />
                    <span class="align-middle">Russian</span>
                  </a>
                </div>
              </li>

              <li class="dropdown notification-list">
                <a
                  class="nav-link dropdown-toggle waves-effect waves-light arrow-none"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <i class="mdi mdi-bell font-size-24"></i>
                  <span class="badge bg-danger rounded-circle noti-icon-badge"
                    >9</span
                  >
                </a>
                <div
                  class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"
                >
                  <div
                    class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"
                  >
                    <div class="row align-items-center">
                      <div class="col">
                        <h6 class="m-0 font-size-16 fw-semibold">
                          Notification
                        </h6>
                      </div>
                      <div class="col-auto">
                        <a
                          href="javascript: void(0);"
                          class="text-dark text-decoration-underline"
                        >
                          <small>Clear All</small>
                        </a>
                      </div>
                    </div>
                  </div>

                  <div class="px-1" style="max-height: 300px" data-simplebar>
                    <h5 class="text-muted font-size-13 fw-normal mt-2">
                      Today
                    </h5>
                    <!-- item-->

                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                              <small class="fw-normal text-muted ms-1"
                                >1 min ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-info">
                              <i class="mdi mdi-account-plus"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Admin
                              <small class="fw-normal text-muted ms-1"
                                >1 hours ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >New user registered</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      Yesterday
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-2.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Cristina Pride
                              <small class="fw-normal text-muted ms-1"
                                >1 day ago</small
                              >
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Hi, How are you? What about our next
                              meeting</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <h5 class="text-muted font-size-13 fw-normal mt-0">
                      30 Dec 2021
                    </h5>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon bg-primary">
                              <i class="mdi mdi-comment-account-outline"></i>
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Datacorp
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Caleb Flakelar commented on Admin</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <!-- item-->
                    <a
                      href="javascript:void(0);"
                      class="dropdown-item p-0 notify-item card read-noti shadow-none mb-1"
                    >
                      <div class="card-body">
                        <span class="float-end noti-close-btn text-muted"
                          ><i class="mdi mdi-close"></i
                        ></span>
                        <div class="d-flex align-items-center">
                          <div class="flex-shrink-0">
                            <div class="notify-icon">
                              <img
                                src="../src/assets/images/users/avatar-4.jpg"
                                class="img-fluid rounded-circle"
                                alt=""
                              />
                            </div>
                          </div>
                          <div class="flex-grow-1 text-truncate ms-2">
                            <h5
                              class="noti-item-title fw-semibold font-size-14"
                            >
                              Karen Robinson
                            </h5>
                            <small class="noti-item-subtitle text-muted"
                              >Wow ! this admin looks good and awesome
                              design</small
                            >
                          </div>
                        </div>
                      </div>
                    </a>

                    <div class="text-center">
                      <i
                        class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"
                      ></i>
                    </div>
                  </div>

                  <!-- All-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item text-center text-primary notify-item border-top border-light py-2"
                  >
                    View All
                  </a>
                </div>
              </li>

              <li class="nav-link" id="theme-mode">
                <i class="bx bx-moon font-size-24"></i>
              </li>

              <li class="dropdown">
                <a
                  class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light"
                  data-bs-toggle="dropdown"
                  href="#"
                  role="button"
                  aria-haspopup="false"
                  aria-expanded="false"
                >
                  <img
                    src="../src/assets/images/users/avatar-4.jpg"
                    alt="user-image"
                    class="rounded-circle"
                  />
                  <span class="ms-1 d-none d-md-inline-block">
                    Jamie D. <i class="mdi mdi-chevron-down"></i>
                  </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end profile-dropdown">
                  <!-- item-->
                  <div class="dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                  </div>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-user"></i>
                    <span>My Account</span>
                  </a>

                  <!-- item-->
                  <a
                    href="javascript:void(0);"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-settings"></i>
                    <span>Settings</span>
                  </a>

                  <!-- item-->
                  <a
                    href="pages-lock-screen.html"
                    class="dropdown-item notify-item"
                  >
                    <i class="fe-lock"></i>
                    <span>Lock Screen</span>
                  </a>

                  <div class="dropdown-divider"></div>

                  <!-- item-->
                  <a href="pages-login.html" class="dropdown-item notify-item">
                    <i class="fe-log-out"></i>
                    <span>Logout</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- ========== Topbar End ========== -->

        <div class="px-3">
          <!-- Start Content-->
          <div class="container-fluid">
            <!-- start page title -->
            <div class="py-3 py-lg-4">
              <div class="row">
                <div class="col-lg-6">
                  <h4 class="page-title mb-0">Modals</h4>
                </div>
                <div class="col-lg-6">
                  <div class="d-none d-lg-block">
                    <ol class="breadcrumb m-0 float-end">
                      <li class="breadcrumb-item">
                        <a href="javascript: void(0);">Base UI</a>
                      </li>
                      <li class="breadcrumb-item active">Modals</li>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <!-- end page title -->

            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Bootstrap Modals</h4>

                    <p class="sub-header">
                      A rendered modal with header, body, and set of actions in
                      the footer.
                    </p>

                    <!-- Standard modal content -->
                    <div
                      id="standard-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="standard-modalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="standard-modalLabel">
                              Modal Heading
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h6>Text in a modal</h6>
                            <p>
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </p>
                            <hr />
                            <h6>Overflowing text to show scroll behavior</h6>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-light"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!--  Modal content for the Large example -->
                    <div
                      class="modal fade"
                      id="bs-example-modal-lg"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="myLargeModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="myLargeModalLabel">
                              Large modal
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">...</div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div
                      class="modal fade"
                      id="bs-example-modal-sm"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="mySmallModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="mySmallModalLabel">
                              Small modal
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">...</div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Full width modal content -->
                    <div
                      id="full-width-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="fullWidthModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-full-width">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="fullWidthModalLabel">
                              Modal Heading
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h6>Text in a modal</h6>
                            <p>
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </p>
                            <hr />
                            <h6>Overflowing text to show scroll behavior</h6>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-light"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Full screen modal content -->
                    <div
                      id="full-screen-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="fullScreenModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-fullscreen">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="fullScreenModalLabel">
                              Modal Heading
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h6>Text in a modal</h6>
                            <p>
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </p>
                            <hr />
                            <h6>Overflowing text to show scroll behavior</h6>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-light"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Long Content Scroll Modal -->
                    <div
                      class="modal fade"
                      id="scrollable-modal"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="scrollableModalTitle"
                      aria-hidden="true"
                    >
                      <div
                        class="modal-dialog modal-dialog-scrollable"
                        role="document"
                      >
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="scrollableModalTitle">
                              Modal title
                            </h5>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div class="button-list">
                      <!-- Standard  modal -->
                      <button
                        type="button"
                        class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#standard-modal"
                      >
                        Standard Modal
                      </button>
                      <!-- Large modal -->
                      <button
                        type="button"
                        class="btn btn-info"
                        data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-lg"
                      >
                        Large Modal
                      </button>
                      <!-- Small modal -->
                      <button
                        type="button"
                        class="btn btn-success"
                        data-bs-toggle="modal"
                        data-bs-target="#bs-example-modal-sm"
                      >
                        Small Modal
                      </button>
                      <!-- Full Screen modal -->
                      <button
                        type="button"
                        class="btn btn-danger"
                        data-bs-toggle="modal"
                        data-bs-target="#full-screen-modal"
                      >
                        Full Screen Modal
                      </button>
                      <!-- Full width modal -->
                      <button
                        type="button"
                        class="btn btn-warning"
                        data-bs-toggle="modal"
                        data-bs-target="#full-width-modal"
                      >
                        Full width Modal
                      </button>
                      <!-- Scrollable modal -->
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#scrollable-modal"
                      >
                        Scrollable Modal
                      </button>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Static backdrop</h4>
                    <p class="sub-header">Examples of Static backdrop.</p>

                    <!-- Button trigger modal -->
                    <button
                      type="button"
                      class="btn btn-primary"
                      data-bs-toggle="modal"
                      data-bs-target="#staticBackdrop"
                    >
                      Launch static backdrop modal
                    </button>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="staticBackdrop"
                      data-bs-backdrop="static"
                      data-bs-keyboard="false"
                      tabindex="-1"
                      aria-labelledby="staticBackdropLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">
                              Modal title
                            </h5>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <p>
                              Aenean lacinia bibendum nulla sed consectetur.
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Donec sed odio dui. Donec
                              ullamcorper nulla non metus auctor fringilla.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Understood
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Modal with Pages</h4>
                    <p class="sub-header">Examples of custom modals.</p>

                    <!-- Signup modal content -->
                    <div
                      id="signup-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-body">
                            <div class="text-center mt-2 mb-4">
                              <div class="auth-logo">
                                <a href="index.html" class="logo logo-dark">
                                  <span class="logo-lg">
                                    <img
                                      src="../src/assets/images/logo-dark.png"
                                      alt=""
                                      height="22"
                                    />
                                  </span>
                                </a>

                                <a href="index.html" class="logo logo-light">
                                  <span class="logo-lg">
                                    <img
                                      src="../src/assets/images/logo-light.png"
                                      alt=""
                                      height="22"
                                    />
                                  </span>
                                </a>
                              </div>
                            </div>

                            <form class="px-3" action="#">
                              <div class="mb-3">
                                <label for="username" class="form-label"
                                  >Name</label
                                >
                                <input
                                  class="form-control"
                                  type="email"
                                  id="username"
                                  required=""
                                  placeholder="Michael Zenaty"
                                />
                              </div>

                              <div class="mb-3">
                                <label for="emailaddress" class="form-label"
                                  >Email address</label
                                >
                                <input
                                  class="form-control"
                                  type="email"
                                  id="emailaddress"
                                  required=""
                                  placeholder="john@deo.com"
                                />
                              </div>

                              <div class="mb-3">
                                <label for="password" class="form-label"
                                  >Password</label
                                >
                                <input
                                  class="form-control"
                                  type="password"
                                  required=""
                                  id="password"
                                  placeholder="Enter your password"
                                />
                              </div>

                              <div class="mb-3">
                                <div class="form-check">
                                  <input
                                    type="checkbox"
                                    class="form-check-input"
                                    id="exampleCheck1"
                                  />
                                  <label
                                    class="form-check-label"
                                    for="exampleCheck1"
                                    >I accept
                                    <a href="#">Terms and Conditions</a></label
                                  >
                                </div>
                              </div>

                              <div class="mb-3 text-center">
                                <button class="btn btn-primary" type="submit">
                                  Sign Up Free
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- SignIn modal content -->
                    <div
                      id="login-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-body">
                            <div class="text-center mt-2 mb-4">
                              <div class="auth-logo">
                                <a href="index.html" class="logo logo-dark">
                                  <span class="logo-lg">
                                    <img
                                      src="../src/assets/images/logo-dark.png"
                                      alt=""
                                      height="22"
                                    />
                                  </span>
                                </a>

                                <a href="index.html" class="logo logo-light">
                                  <span class="logo-lg">
                                    <img
                                      src="../src/assets/images/logo-light.png"
                                      alt=""
                                      height="22"
                                    />
                                  </span>
                                </a>
                              </div>
                            </div>

                            <form action="#" class="px-3">
                              <div class="mb-3">
                                <label for="emailaddress1" class="form-label"
                                  >Email address</label
                                >
                                <input
                                  class="form-control"
                                  type="email"
                                  id="emailaddress1"
                                  required=""
                                  placeholder="john@deo.com"
                                />
                              </div>

                              <div class="mb-3">
                                <label for="password1" class="form-label"
                                  >Password</label
                                >
                                <input
                                  class="form-control"
                                  type="password"
                                  required=""
                                  id="password1"
                                  placeholder="Enter your password"
                                />
                              </div>

                              <div class="mb-3">
                                <div class="form-check">
                                  <input
                                    type="checkbox"
                                    class="form-check-input"
                                    id="login-rememberCheck"
                                  />
                                  <label
                                    class="form-check-label"
                                    for="login-rememberCheck"
                                    >Remember me</label
                                  >
                                </div>
                              </div>

                              <div class="mb-3 text-center">
                                <button
                                  class="btn rounded-pill btn-primary"
                                  type="submit"
                                >
                                  Sign In
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div class="button-list">
                      <!-- Sign Up modal -->
                      <button
                        type="button"
                        class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#signup-modal"
                      >
                        Sign Up Modal
                      </button>
                      <!-- Log In modal -->
                      <button
                        type="button"
                        class="btn btn-info"
                        data-bs-toggle="modal"
                        data-bs-target="#login-modal"
                      >
                        Log In Modal
                      </button>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Modal Position</h4>
                    <p class="sub-header">
                      Specify the position for the modal. You can display modal
                      at top, bottom, center or right of page by specifying
                      classes <code>modal-top</code>, <code>modal-bottom</code>,
                      <code>modal-dialog-centered</code> and
                      <code>modal-right</code> respectively.
                    </p>

                    <!-- Top modal content -->
                    <div
                      id="top-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-top">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="topModalLabel">
                              Modal Heading
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h5>Text in a modal</h5>
                            <p>
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-light"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Right modal content -->
                    <div
                      id="right-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm modal-right">
                        <div class="modal-content">
                          <div class="modal-header border-0">
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <div class="text-center">
                              <h4 class="mt-0">Text in a modal</h4>
                              <p>
                                Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula.
                              </p>
                              <button
                                type="button"
                                class="btn btn-danger btn-sm"
                                data-bs-dismiss="modal"
                              >
                                Close
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Bottom modal content -->
                    <div
                      id="bottom-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm modal-bottom">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="bottomModalLabel">
                              Modal Heading
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h5>Text in a modal</h5>
                            <p>
                              Duis mollis, est non commodo luctus, nisi erat
                              porttitor ligula.
                            </p>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-light"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">
                              Save changes
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Center modal content -->
                    <div
                      class="modal fade"
                      id="centermodal"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="myCenterModalLabel">
                              Center modal
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <h5>Overflowing text to show scroll behavior</h5>
                            <p>
                              Cras mattis consectetur purus sit amet fermentum.
                              Cras justo odio, dapibus ac facilisis in, egestas
                              eget quam. Morbi leo risus, porta ac consectetur
                              ac, vestibulum at eros.
                            </p>
                            <p>
                              Praesent commodo cursus magna, vel scelerisque
                              nisl consectetur et. Vivamus sagittis lacus vel
                              augue laoreet rutrum faucibus dolor auctor.
                            </p>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div class="button-list">
                      <!-- Top modal -->
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#top-modal"
                      >
                        Top Modal
                      </button>
                      <!-- Bottom modal -->
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#bottom-modal"
                      >
                        Bottom Modal
                      </button>
                      <!-- Center modal -->
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#centermodal"
                      >
                        Center modal
                      </button>
                      <!-- Right modal -->
                      <button
                        type="button"
                        class="btn btn-secondary"
                        data-bs-toggle="modal"
                        data-bs-target="#right-modal"
                      >
                        Rightbar Modal
                      </button>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->

              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Modal based Alerts</h4>
                    <p class="sub-header">
                      Show different contexual alert messages using modal
                      component
                    </p>

                    <!-- Success Alert Modal -->
                    <div
                      id="success-alert-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-success">
                          <div class="modal-body p-4">
                            <div class="text-center">
                              <i class="bx bx-check-double h1 text-white"></i>
                              <h4 class="mt-2 text-white">Well Done!</h4>
                              <p class="mt-3 text-white">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam.
                              </p>
                              <button
                                type="button"
                                class="btn btn-light my-2"
                                data-bs-dismiss="modal"
                              >
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Info Alert Modal -->
                    <div
                      id="info-alert-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                          <div class="modal-body p-4">
                            <div class="text-center">
                              <i class="bx bxs-info-circle h1 text-info"></i>
                              <h4 class="mt-2">Heads up!</h4>
                              <p class="mt-3">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam.
                              </p>
                              <button
                                type="button"
                                class="btn btn-info my-2"
                                data-bs-dismiss="modal"
                              >
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Warning Alert Modal -->
                    <div
                      id="warning-alert-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                          <div class="modal-body p-4">
                            <div class="text-center">
                              <i class="bx bxs-no-entry h1 text-warning"></i>
                              <h4 class="mt-2">Incorrect Information</h4>
                              <p class="mt-3">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam.
                              </p>
                              <button
                                type="button"
                                class="btn btn-warning my-2"
                                data-bs-dismiss="modal"
                              >
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Danger Alert Modal -->
                    <div
                      id="danger-alert-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-sm">
                        <div class="modal-content modal-filled bg-danger">
                          <div class="modal-body p-4">
                            <div class="text-center">
                              <i class="bx bx-aperture h1 text-white"></i>
                              <h4 class="mt-2 text-white">Oh snap!</h4>
                              <p class="mt-3 text-white">
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam.
                              </p>
                              <button
                                type="button"
                                class="btn btn-light my-2"
                                data-bs-dismiss="modal"
                              >
                                Continue
                              </button>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div class="button-list">
                      <!-- Success Alert modal -->
                      <button
                        type="button"
                        class="btn btn-success"
                        data-bs-toggle="modal"
                        data-bs-target="#success-alert-modal"
                      >
                        Success Alert
                      </button>
                      <!-- Info Alert modal -->
                      <button
                        type="button"
                        class="btn btn-info"
                        data-bs-toggle="modal"
                        data-bs-target="#info-alert-modal"
                      >
                        Info Alert
                      </button>
                      <!-- Warning Alert modal -->
                      <button
                        type="button"
                        class="btn btn-warning"
                        data-bs-toggle="modal"
                        data-bs-target="#warning-alert-modal"
                      >
                        Warning Alert
                      </button>
                      <!-- Danger Alert modal -->
                      <button
                        type="button"
                        class="btn btn-danger"
                        data-bs-toggle="modal"
                        data-bs-target="#danger-alert-modal"
                      >
                        Danger Alert
                      </button>
                    </div>
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->

            <div class="row">
              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Multiple Modal</h4>
                    <p class="sub-header">
                      Display a series of modals one by one to guide your users
                      on multiple aspects or take step wise input.
                    </p>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModalToggle"
                      aria-hidden="true"
                      aria-labelledby="exampleModalToggleLabel"
                      tabindex="-1"
                    >
                      <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4
                              class="modal-title"
                              id="exampleModalToggleLabel"
                            >
                              Modal 1
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            Show a second modal and hide this one with the
                            button below.
                          </div>
                          <div class="modal-footer">
                            <button
                              class="btn btn-primary"
                              data-bs-target="#exampleModalToggle2"
                              data-bs-toggle="modal"
                              data-bs-dismiss="modal"
                            >
                              Open second modal
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModalToggle2"
                      aria-hidden="true"
                      aria-labelledby="exampleModalToggleLabel2"
                      tabindex="-1"
                    >
                      <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4
                              class="modal-title"
                              id="exampleModalToggleLabel2"
                            >
                              Modal 2
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            Hide this modal and show the first with the button
                            below.
                          </div>
                          <div class="modal-footer">
                            <button
                              class="btn btn-primary"
                              data-bs-target="#exampleModalToggle"
                              data-bs-toggle="modal"
                              data-bs-dismiss="modal"
                            >
                              Back to first
                            </button>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <a
                      class="btn btn-secondary"
                      data-bs-toggle="modal"
                      href="#exampleModalToggle"
                      role="button"
                      >Open first modal</a
                    >
                  </div>
                  <!-- end card-body -->
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->

              <div class="col-xl-6">
                <div class="card">
                  <div class="card-body">
                    <h4 class="header-title">Custom Modals</h4>

                    <p class="sub-header">Examples of custom modals.</p>

                    <!-- sample modal content -->

                    <div
                      id="con-close-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                      style="display: none"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title">
                              Modal Content is Responsive
                            </h4>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body p-4">
                            <div class="row">
                              <div class="col-md-6">
                                <div class="mb-3">
                                  <label for="field-1" class="form-label"
                                    >Name</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-1"
                                    placeholder="John"
                                  />
                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="mb-3">
                                  <label for="field-2" class="form-label"
                                    >Surname</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-2"
                                    placeholder="Doe"
                                  />
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-12">
                                <div class="mb-3">
                                  <label for="field-3" class="form-label"
                                    >Address</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-3"
                                    placeholder="Address"
                                  />
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-4">
                                <div class="mb-3">
                                  <label for="field-4" class="form-label"
                                    >City</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-4"
                                    placeholder="Boston"
                                  />
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="mb-3">
                                  <label for="field-5" class="form-label"
                                    >Country</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-5"
                                    placeholder="United States"
                                  />
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="mb-3">
                                  <label for="field-6" class="form-label"
                                    >Zip</label
                                  >
                                  <input
                                    type="text"
                                    class="form-control"
                                    id="field-6"
                                    placeholder="123456"
                                  />
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-12">
                                <div class="mb-3 no-margin">
                                  <label for="field-7" class="form-label"
                                    >Personal Info</label
                                  >
                                  <textarea
                                    class="form-control"
                                    id="field-7"
                                    placeholder="Write something about yourself"
                                  ></textarea>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary waves-effect"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                            <button
                              type="button"
                              class="btn btn-info waves-effect waves-light"
                            >
                              Save changes
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- /.modal -->

                    <div
                      id="accordion-modal"
                      class="modal fade"
                      tabindex="-1"
                      role="dialog"
                      aria-hidden="true"
                      style="display: none"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content p-0">
                          <div class="accordion" id="accordionExample">
                            <div class="accordion-item">
                              <h2 class="accordion-header mt-0" id="headingOne">
                                <button
                                  class="accordion-button"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseOne"
                                  aria-expanded="true"
                                  aria-controls="collapseOne"
                                >
                                  Accordion Item #1
                                </button>
                              </h2>
                              <div
                                id="collapseOne"
                                class="accordion-collapse collapse show"
                                aria-labelledby="headingOne"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  <strong
                                    >This is the first item's accordion
                                    body.</strong
                                  >
                                  It is hidden by default, until the collapse
                                  plugin adds the appropriate classes that we
                                  use to style each element. These classes
                                  control the overall appearance, as well as the
                                  showing and hiding via CSS transitions. You
                                  can modify any of this with custom CSS or
                                  overriding our default variables. It's also
                                  worth noting that just about any HTML can go
                                  within the <code>.accordion-body</code>,
                                  though the transition does limit overflow.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingTwo">
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseTwo"
                                  aria-expanded="false"
                                  aria-controls="collapseTwo"
                                >
                                  Accordion Item #2
                                </button>
                              </h2>
                              <div
                                id="collapseTwo"
                                class="accordion-collapse collapse"
                                aria-labelledby="headingTwo"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  <strong
                                    >This is the second item's accordion
                                    body.</strong
                                  >
                                  It is hidden by default, until the collapse
                                  plugin adds the appropriate classes that we
                                  use to style each element. These classes
                                  control the overall appearance, as well as the
                                  showing and hiding via CSS transitions. You
                                  can modify any of this with custom CSS or
                                  overriding our default variables. It's also
                                  worth noting that just about any HTML can go
                                  within the <code>.accordion-body</code>,
                                  though the transition does limit overflow.
                                </div>
                              </div>
                            </div>
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingThree">
                                <button
                                  class="accordion-button collapsed"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#collapseThree"
                                  aria-expanded="false"
                                  aria-controls="collapseThree"
                                >
                                  Accordion Item #3
                                </button>
                              </h2>
                              <div
                                id="collapseThree"
                                class="accordion-collapse collapse"
                                aria-labelledby="headingThree"
                                data-bs-parent="#accordionExample"
                              >
                                <div class="accordion-body">
                                  <strong
                                    >This is the third item's accordion
                                    body.</strong
                                  >
                                  It is hidden by default, until the collapse
                                  plugin adds the appropriate classes that we
                                  use to style each element. These classes
                                  control the overall appearance, as well as the
                                  showing and hiding via CSS transitions. You
                                  can modify any of this with custom CSS or
                                  overriding our default variables. It's also
                                  worth noting that just about any HTML can go
                                  within the <code>.accordion-body</code>,
                                  though the transition does limit overflow.
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->

                    <div class="button-list">
                      <!-- Responsive modal -->
                      <button
                        type="button"
                        class="btn btn-success waves-effect waves-light"
                        data-bs-toggle="modal"
                        data-bs-target="#con-close-modal"
                      >
                        Responsive Modal
                      </button>
                      <!-- Accordion modal -->
                      <button
                        type="button"
                        class="btn btn-secondary waves-effect waves-light"
                        data-bs-toggle="modal"
                        data-bs-target="#accordion-modal"
                      >
                        Accordion in Modal
                      </button>
                    </div>
                  </div>
                </div>
                <!-- end card-->
              </div>
              <!-- end col -->
            </div>
            <!-- end row -->
          </div>
          <!-- container -->
        </div>
        <!-- content -->

        <!-- Footer Start -->
        <footer class="footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">
                <div>
                  <script>
                    document.write(new Date().getFullYear());
                  </script>
                  © Dashtrap
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="d-none d-md-flex gap-4 align-item-center justify-content-md-end"
                >
                  <p class="mb-0">
                    Design & Develop by
                    <a href="https://myrathemes.com/" target="_blank"
                      >MyraStudio</a
                    >
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <!-- end Footer -->
      </div>
      <!-- End Page content -->
    </div>
    <!-- END wrapper -->

    <!-- App js -->
    <script src="../src/assets/js/vendor.min.js"></script>
    <script src="../src/assets/js/app.js"></script>
  </body>
</html>
